<!--
 * @Author: wangyu
 * @Date: 2024-12-25 15:04:19
 * @LastEditTime: 2024-12-27 09:57:31
 * @LastEditors: wangyu
 * @Description: 
 * @FilePath: \dzsq-smartpark-platform\src\components\Header\index.vue
-->
<template>
  <div>
    <div class="header">
      <div class="header-time">
        <img src="@/assets/imgs/yun.svg" />
        <span style="margin-left: 10px"> {{ weather.weather }}</span>
        <span style="margin-left: 16px; margin-right: 4px">
          {{ weather.temperature }}</span
        >&#xB0;C
        <span style="margin-left: 16px"> {{ time }}</span>
        <img
          class="header-return"
          src="@/assets/imgs/icon_return.svg"
          @click="back"
        />
      </div>
      <div class="header-content">大足双桥经开区智慧产业园平台</div>
    </div>
    <footer>
      <div class="header-notice">
        <span
          style="
            display: flex;
            color: #8adafd;
            width: calc(100% - 76px);
            margin-left: 76px;
            margin-top: 3px;
            align-items: center;
          "
        >
          <div style="white-space: nowrap; margin-top: 3px">公告：</div>
          <div
            style="
              display: inline-block;
              line-height: 1;
              color: #8adafd;
              width: calc(100% - 12px);
              margin-left: 12px;
              margin-top: 3px;
              vertical-align: middle;
            "
          >
            <el-carousel
              height="36px"
              direction="vertical"
              indicator-position="none"
              :autoplay="true"
            >
              <el-carousel-item v-for="item in news" :key="item.name">
                <div class="medium" style="height: 36px; line-height: 36px">
                  {{ item.name }}
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </span>
      </div>
      <img src="@/assets/imgs/background-footer.png" style="margin: 0 16px" />
    </footer>
  </div>
</template>

<script setup>
import { useTime } from "@/utils/useTime";
import { getWeatherInfo } from "@/apis/common.js";
const router = useRouter();
const { nowTime } = useTime();
const emit = defineEmits(["handleVersionClick"]);

const news = ref([
  { name: "xx公司员工交流活动通知函" },
  { name: "xx公司员工交流活动通知函1" },
  { name: "xx公司员工交流活动通知函2" },
  { name: "xx公司员工交流活动通知函3" },
  { name: "xx公司员工交流活动通知函4" },
]);

/**
 * @description: 实时时间
 * @return {*}
 */
let timer = null;
let time = ref(nowTime.value);
timer = setInterval(() => {
  time.value = useTime().nowTime.value;
}, 1000);

/**
 * @description: 实时天气
 * @return {*}
 */
const weather = ref({});
onMounted(() => {
  // 获取天气信息
  getWeatherInfo().then((res) => {
    weather.value = res.data.lives[0];
  });
});

const back = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
/* @import ''; 引入css类 */
.header {
  position: relative;
  display: flex;
  width: 100%;
  height: 80px;
  align-items: center;
  background: url("@/assets/imgs/background-title.png") no-repeat 0 0;
  background-size: 100% 100%;
  overflow: hidden;
  .header-time {
    position: absolute;
    display: flex;
    bottom: -5px;
    right: 24px;
    color: #8adafd;
    align-items: center;
    z-index: 10;
    @include ALIBABAPUHUITIREGULAR(20px);
    > img.header-return {
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
    }
  }
  &-content {
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    color: #8adafd;
    left: 51.3%;
    top: 50%;
    width: 630px;
    height: 103px;
    line-height: 103px;
    background-image: url("@/assets/imgs/container-title.png");
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    background-size: cover;
    text-align: center;
    z-index: 9;
  }
}
footer {
  margin-top: -32px;
  .header-notice {
    width: 417px;
    height: 48px;
    line-height: 48px;
    margin-left: -16px;
    background-image: url("@/assets/imgs/container-notice.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  > img {
    width: calc(100% - 32px);
    height: 8px;
  }
}
</style>
